<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>非父子组件间传值-bus/总线/观察者/发布订阅模式</title>
		<script src="../libs/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="root">
			<dl>
				<dt>{{title}}</dt>
				<dd>{{content}}</dd>
			</dl>
			<child content="hello"></child>
			<child content="hello1"></child>
			<div @click="sendMsgToChild">{{childMsg}}</div>
			
			<msg-container></msg-container>
		</div>
		
		<script type="text/javascript">
			
			Vue.prototype.$EventBus = new Vue();
			Vue.component('child',{
				props:['content'],
				data:function(){
					return {
						//复制一份父组件传过来的数据，防止篡改父组件数据
						selfContent:this.content
					}
				},
				template:'<div @click="sendMsg">{{selfContent}}</div>', 
				methods:{
					sendMsg:function(){
						//发送消息
						this.$EventBus.$emit('sendMsg','来自'+this.selfContent+'的Msg');
						
						this.$EventBus.$emit('sendToChild','来自同级组件的Msg');	
					}
				}
			});
			Vue.component('msgContainer',{
				data:function(){
					return {
						msg:'this is child'
					}
				},
				template:'<button>{{this.msg}}</button>',
				mounted(){
					//监听父组件消息
					this.$EventBus.$on('sendToChild',(msg)=>{
						alert(msg);
						this.msg = msg;
					});
				}
			});
			
			var vm = new Vue({
				el:'#root',
				data:{
					title:'EventBus的简介',
					content:`
						EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，
						可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，
						就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。 `,
					childMsg:''
						
				},
				mounted(){
					//监听消息
					this.$EventBus.$on('sendMsg',(msg)=>{
						this.childMsg=msg;
					});
				},
				methods:{
					sendMsgToChild:function(){
						alert('sendToChild');
						this.$EventBus.$emit('sendToChild','来自根组件的Msg');	
					}
				}
			});
		</script>
	</body>
</html>
